{% extends 'layout.html' %}

{% block content %}
    <div class="row">
        <div class="col-xs-12">
            <div class="box">
                <!-- /.box-header -->
                <div class="box-body">
                    <form class="form-inline">
                        <div class="fieldset mb20 pb15">
                            <div class="legend">查询条件</div>
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="form-group col-sm-4 pd0">
                                        <label class="filter-label">任务名称：</label> <input type="text" id="name"
                                                                                         class="form-control searchInput"
                                                                                         placeholder="请输入任务名称">
                                    </div>

                                    <div class="form-group col-sm-4 pd0" style="position: relative;">
                                        <label class="filter-label">启动人：</label>
                                        <input type="text" id="operator"
                                               class="form-control searchInput ui-autocomplete-input"
                                               placeholder="请输入启动人帐号" autocomplete="off">
                                        <span class="btn btn-sm btn-info" style="display: inline;"
                                              id="operatorMe">我</span>
                                    </div>

                                    <div class="form-group col-sm-4 pd0">
                                        <label class="filter-label">任务状态：</label> <select id="status"
                                                                                          class="form-control searchInput"
                                                                                          style="display: none;">
                                        <option value="" selected="selected">全部</option>
                                        <option value="1">未执行</option>
                                        <option value="2">正在执行</option>
                                        <option value="3">执行成功</option>
                                        <option value="4">执行失败</option>
                                        <option value="5">跳过</option>
                                        <option value="6">忽略错误</option>
                                        <option value="7">等待用户</option>
                                        <option value="8">手动结束</option>
                                        <option value="9">状态异常</option>
                                        <option value="10">步骤强制终止中</option>
                                        <option value="11">步骤强制终止成功</option>
                                        <option value="12">步骤强制终止失败</option>
                                    </select>
                                        <div class="chosen-container chosen-container-single" style="width: 222px;"
                                             title="" id="status_chosen"><a class="chosen-single"
                                                                            tabindex="-1"><span>全部</span>
                                            <div><b></b></div>
                                        </a>
                                            <div class="chosen-drop">
                                                <div class="chosen-search"><input type="text" autocomplete="off"></div>
                                                <ul class="chosen-results"></ul>
                                                <div class="chosen-operate newTask" href="./app/newTask.jsp"
                                                     style="display:none;">+新建作业
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row mt10">
                                    <div class="form-group col-sm-4 pd0 date-group">
                                        <label class="filter-label">执行时间：</label> <input type="text"
                                                                                         id="createDateStart"
                                                                                         style="width: 100px;"
                                                                                         class="form-control start-date hasDatepicker"
                                                                                         placeholder="开始日期"
                                                                                         readonly="readonly"> <span
                                            style="margin-left: 5px; margin-right: 5px; ">-</span> <input type="text"
                                                                                                          id="createDateEnd"
                                                                                                          style="width: 100px;"
                                                                                                          class="form-control end-date hasDatepicker"
                                                                                                          placeholder="结束日期"
                                                                                                          readonly="readonly">
                                    </div>
                                    <div class="form-group col-sm-4 pd0">
                                        <label class="filter-label">启动方式：</label> <select id="startWay"
                                                                                          class="form-control searchInput"
                                                                                          style="display: none;">
                                        <option value="" selected="selected">全部</option>
                                        <option value="1">页面执行</option>
                                        <option value="3">定时执行</option>
                                    </select>
                                        <div class="chosen-container chosen-container-single" style="width: 222px;"
                                             title="" id="startWay_chosen"><a class="chosen-single" tabindex="-1"><span>全部</span>
                                            <div><b></b></div>
                                        </a>
                                            <div class="chosen-drop">
                                                <div class="chosen-search"><input type="text" autocomplete="off"></div>
                                                <ul class="chosen-results"></ul>
                                                <div class="chosen-operate newTask" href="./app/newTask.jsp"
                                                     style="display:none;">+新建作业
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <hr class="mt10 mb15">
                                <div class="text-left">
                                    <button type="button" id="findBtn" class="btn btn-info">
                                        <i class="fa fa-search"></i> 查询
                                    </button>
                                    &nbsp;
                                    <button type="button" id="resetBtn" class="btn btn-success">
                                        <i class="fa fa-refresh"></i> 重置
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive">
                        <table id="table">
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block self_footer_js %}
<script>
    var $table = $('#table'),
        $remove = $('#remove'),
        selections = [];

    function initTable() {
        $table.bootstrapTable({
            method: 'get',
            url: '',
            toolbar: '#toolbar',
            //指定主键列
            idField: 'id',
            sidePagination: "server",
            //height: getHeight(),
            //设置为 true 会有隔行变色效果
            striped: true,
            //search: true,
            //showRefresh: true,
            //showColumns: true,
            //showToggle: true,
            //showPaginationSwitch: true,
            pagination: true,
            pageSize: 8,
            pageList: [10, 25, 50, 100],
            cache: false,
            clickToSelect: true,
            columns: [
                {
                    field: 'state',
                    checkbox: true,
                    align: 'center'
                }, {
                    field: 'id',
                    title: 'ID',
                    align: 'center',
                    visible: false
                }, {
                    field: 'username',
                    title: '任务名称',
                    sortable: true,
                    align: 'center',
                    formatter: nameFormatter
                }, {
                    field: 'name',
                    title: '启动人',
                    align: 'center'
                }, {
                    field: 'group',
                    title: '任务状态',
                    align: 'center'
                }, {
                    field: 'role',
                    title: '开始时间',
                    align: 'center'
                }, {
                    field: 'hostnum',
                    title: '结束时间',
                    align: 'center'
                }, {
                    field: 'email',
                    title: '启动方式',
                    align: 'center'
                }, {
                    field: 'email',
                    title: '总耗时(s)',
                    align: 'center'
                }, {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    events: operateEvents,
                    formatter: operateFormatter
                }

            ]
        })
    }

    function getHeight() {
        return $(window).height() - $('h1').outerHeight(true);
    }

    function nameFormatter(value, row, index) {
        return [
            '<a href="{% url 'user_profile' %}?uid=' + row.id + '">',
            value + '</a>',
        ].join('');
    }

    //操作列方法
    function operateFormatter(value, row, index) {
        return [
            '<a class="btn btn-xs btn-default" href="{% url 'user_edit' %}?id=' + row.id + '">',
            '<i class="fa fa-edit"></i> 编辑</a> ',
            '<a class="remove btn btn-xs btn-danger" href="javascript:void(0)" title="Remove">',
            '<i class="fa fa-trash-o"></i> 删除',
            '</a>'
        ].join('');
    }

    window.operateEvents = {
        'click .remove': function (e, value, row, index) {
            BootstrapDialog.confirm({
                title: "警告",
                type: BootstrapDialog.TYPE_WARNING,
                message: "确定删除用户 <span class='red'>" + row.name + "</span> 吗？",
                draggable: true,
                btnCancelLabel: '放弃',
                btnCancelClass: 'btn-white',
                btnOKLabel: '确认',
                callback: function (result) {
                    if (result) {
                        var ids = [row.id];
                        $.post("{% url 'user_del' %}", {ids: ids}, function (data) {
                                if (data.code != 0) {
                                    $table.bootstrapTable("refresh");
                                    dialogItself.close();
                                }
                                else BootstrapDialog.alert(data.message);

                            }, "json"
                        );
                    }
                }
            });
        }
    };

    $(function () {
        //初始化表格
        initTable();

        // delete button
        $("#btn_remove").click(function () {
            var selected = $table.bootstrapTable('getSelections');
            if ($(selected).length > 0) {
                BootstrapDialog.confirm({
                    title: "警告",
                    message: "确定删除选中的" + $(selected).length + "个用户吗？",
                    type: BootstrapDialog.TYPE_WARNING,
                    btnCancelLabel: '放弃',
                    btnCancelClass: 'btn-white',
                    btnOKLabel: '确认',
                    //btnOKClass: 'btn-default',
                    callback: function (result) {
                        if (result) {
                            var ids = new Array($(selected).length);
                            $.each(selected, function (index, value) {
                                ids[index] = value.id;
                            });
                            $.post("{% url 'user_del' %}", {ids: ids}, function (data) {
                                    if (data.code != 0) {
                                        $table.bootstrapTable("refresh");
                                        dialogItself.close();
                                    }
                                    else BootstrapDialog.alert(data.message);

                                }, "json"
                            );
                        }
                    }
                });
            }
            else BootstrapDialog.warning("请选择要删除的行");
        });
    });
</script>
{% endblock %}